<template>
  <!-- 后台管理系统主界面 -->
<div>
    <!--头部-->

    <div id="headCheck">
  <span>学生学号：</span>
      <el-input
          placeholder="请输入内容"

          v-model="inputScoreById"
          clearable
          style="width: 150px">
      </el-input>
  <el-button type="warning" round @click="searchScore" style="margin-left: 5px">搜索</el-button>

      <span style="margin-left: 15px">科目ID：</span>
      <el-input
          placeholder="请输入内容"
          v-model="inputScoreBySubId"
          clearable
          style="width: 150px">
      </el-input>
      <el-button type="warning" round @click="searchScore1" style="margin-left: 10px">搜索</el-button>
      <el-button type="primary" round @click="backToAllScore" style="margin-left: 20px">返回</el-button>
      <el-button type="warning" round @click="scoreInsert" style="margin-left: 100px">手动添加成绩</el-button>


    </div>


    <el-main id="main">
      <template>
        <el-table
            :data="tableDatas"
            border
            style="width: 100%; height: 500px"
        >
          <el-table-column align="center" prop="id" label="成绩编号" width="120" >
          </el-table-column>
          <el-table-column align="center" prop="student_subscribe_course_id" label="学生科目ID"width="110">
          </el-table-column>
          <el-table-column align="center" prop="first_score" label="首考成绩" width="120">
          </el-table-column>
          <el-table-column align="center" prop="daily_score" label="平时成绩" width="130">
          </el-table-column>
          <el-table-column align="center" prop="pass_status" label="通过状态" width="130">
          </el-table-column>
          <el-table-column align="center" prop="second_status" label="补考状态" width="130">
          </el-table-column>
          <el-table-column align="center" prop="second_score" label="补考成绩" width="130">
          </el-table-column>
          <el-table-column align="center" prop="final_score" label="最终成绩" width="120">
          </el-table-column>
          <el-table-column align="center" prop="if_deleted" label="是否删除" width="120">
          </el-table-column>

          <el-table-column  fixed="right"  label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                  @click="editRow(scope.$index, scope.row)"
                  type="warning"
                  size="small">
                编辑
              </el-button>
              <el-button
                  @click="deleteRow(scope.$index, scope.row)"
                  type="danger"
                  size="small"
              >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="添加成绩" :visible.sync="visible" width="35%">
          <el-form :model="addScoreForm" label-position="left" label-width="160px" :rules="addScoreRules"  >
            <el-form-item label="成绩编号" prop="id" style="width: 400px">
              <el-input v-model="addScoreForm.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="科目ID" prop="student_subscribe_course_id" style="width: 300px">
              <el-input v-model="addScoreForm.student_subscribe_course_id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="first_score" label="首考成绩" style="width: 400px" >
              <el-input v-model="addScoreForm.first_score" autocomplete="off" @change="visibleOfAll"></el-input>
            </el-form-item>
            <el-form-item  prop="daily_score" label="平时成绩" style="width: 400px" >
              <el-input v-model="addScoreForm.daily_score" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item  prop="second_score" label="补考成绩" v-if="this.secondVisible==true" style="width: 400px">
              <el-input v-model="addScoreForm.second_score"  autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="addScore()">提 交</el-button>
          </div>
        </el-dialog>
        <el-dialog title="编辑成绩" :visible.sync="editVisible" width="35%">
          <el-form :model="editScoreForm" label-position="left" label-width="160px" :rules="editScoreRules"  >
            <el-form-item  prop="first_score" label="首考成绩" style="width: 400px">
              <el-input v-model="editScoreForm.first_score" autocomplete="off" @change="visibleOfAll1"></el-input>
            </el-form-item>
            <el-form-item  prop="daily_score" label="平时成绩" style="width: 400px">
              <el-input v-model="editScoreForm.daily_score" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item  prop="second_score" v-if="this.secondVisible1==true" label="补考成绩" style="width: 400px">
              <el-input v-model="editScoreForm.second_score" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否删除" prop="if_deleted" style="width: 350px">
              <el-select
                  class="term-select"
                  @change=""
                  v-model="editScoreForm.if_deleted"
                  placeholder="请确认是否删除"
              >
                <el-option v-for="item in if_deletedData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateScore">编 辑</el-button>
          </div>
        </el-dialog>
        <div style="text-align: left">
          <el-row>
            <el-col :span="12">
              <el-pagination
                  style="margin-bottom: -10px"
                  background
                  layout="prev, pager, next, jumper, total, sizes"
                  :page-size="size"
                  :current-page="now"
                  :page-sizes="[2, 4, 6, 8]"
                  @current-change="findPage"
                  @size-change="findSize"
                  :total="total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </div>
        <!-- Main区域，数据显示 -->
        <router-view>
        </router-view>
      </template>
    </el-main>
  </div>
</template>
<script>
import axiosInstance from "@/main";
import axios from "axios";
export default {
  name: "ManagerMain",
  data() {
    return {
      if_deletedData:[
        {
          label:'删除',
          value:1
        },
        {
          label: '保留',
          value: 0
        },
      ],
      pass_statusData: [
        {
          label: '通过',
          value: 1
        },
        {
          label: '未通过',
          value: 2
        }
      ],
      second_statusData: [
        {
          label: '未启用补考',
          value: 0,
          secondVisible:false
        },
        {
          label: '启用补考',
          value: 1,
          secondVisible: true
        }
      ],
      time: "",
      default_active: "0",
      name: '用户名',
      title: '教务管理系统',
      total: 0,
      now: 1,
      size: 8,
      input2: "",
      tableDatas: [],
      inputScoreById :'',
      inputScoreBySubId :'',
      flag:0,
      visible: false,
      editVisible: false,
      secondVisible:false,
      passVisible:false,
      secondVisible1:false,
      addScoreRules: {
        id: [{required: true, message: '请输入学生id', trigger: 'blur'}],
        student_subscribe_course_id: [{required: true, message: '请输入学生科目id', trigger: 'blur'}],
        first_score: [{required: true, message: '请输入初始卷面成绩', trigger: 'blur'}],
        daily_score: [{required: true, message: '请输入平时成绩', trigger: 'blur'}],
        pass_status: [{required: true, message: '请输入通过状态', trigger: 'blur'}],
        second_status: [{required: true, message: '请输入补考状态', trigger: 'blur'}],
        second_score: [{required: true, message: '请输入补考成绩', trigger: 'blur'}],
        final_score: [{required: true, message: '请输入最终成绩', trigger: 'blur'}]
      },
      addScoreForm: {
        id:'' ,
        student_subscribe_course_id:''  ,
        first_score:'' ,
        daily_score:'' ,
        pass_status:'' ,
        second_status:'' ,
        second_score:'' ,
        final_score :0,
        if_deleted:0
      },
      editScoreRules: {

        student_subscribe_course_id: [{required: true, message: '请输入学生科目id', trigger: 'blur'}],
        first_score: [{required: true, message: '请输入初始卷面成绩', trigger: 'blur'}],
        daily_score: [{required: true, message: '请输入平时成绩', trigger: 'blur'}],
        pass_status: [{required: true, message: '请输入通过状态', trigger: 'blur'}],
        second_status: [{required: true, message: '请输入补考状态', trigger: 'blur'}],
        second_score: [{required: true, message: '请输入补考成绩', trigger: 'blur'}],
        final_score: [{required: true, message: '请输入最终成绩', trigger: 'blur'}],
        if_deleted: [{required: true, message: '请修改是否删除', trigger: 'blur'}],
      },
      editScoreForm: {
        id:'',
        student_subscribe_course_id: '',
        first_score: '',
        daily_score: '',
        pass_status: '',
        second_status: '',
        second_score: '',
        final_score: '',
        if_deleted: ''
      },
    };
  },


  methods: {
    handleClick(row) {
      console.log(row);
    },
    second_visible(){
      this.secondVisible=true;
    },
    visibleOfAll(){
      if(this.addScoreForm.first_score>=60) {
        this.secondVisible=false;
        this.addScoreForm.pass_status=1;
        this.addScoreForm.second_status=0;
        this.addScoreForm.second_score=-1;
      }
      else{
        this.secondVisible=true;
        this.addScoreForm.pass_status=2;
        this.addScoreForm.second_status=1;
      }
    },
    visibleOfAll1(){
if (this.editScoreForm.first_score>=60){
  this.secondVisible1=false;
  this.editScoreForm.pass_status=1;
  this.editScoreForm.second_status=0;
  this.editScoreForm.second_score=-1;
}
else{
  this.secondVisible1=true;
  this.editScoreForm.pass_status=2;
  this.editScoreForm.second_status=1;
}
    },
    deleteRow(index, row) {
      // 创造本行对象
      let target = Object.assign({}, row);
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/admin/scoreDelete/' + target.id,
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.showAllUserInfo(this.now,this.size);
          this.$message({message: "删除成绩成功！", type: "success"})
          // 前端删除本行的动画
          row.splice(index, 1);
        }
      })
    },
    editRow(index, row) {
      this.editVisible = true;
      this.editScoreForm = Object.assign({}, row);
if(this.editScoreForm.first_score<60){
  this.secondVisible1=true;
}else{
  this.secondVisible1=false;
}
    },
    // 第n页信息
    findPage(now_page) {
      //用来处理当前页的方法,page为当前页
      this.now = now_page;
      this.showAllUserInfo(now_page, this.size);
    },
    findSize(now_size) {
      //用来处理每页条数的方法,size为当前页条数
      this.size = now_size;
      this.showAllUserInfo(this.now, now_size);
    },

    // 展示所有的用户信息
    showAllUserInfo(currentPage, pageSize) {
      // 异步请求显示所有数据
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;

      axios
          .get("http://localhost:8085/admin/scoreSelect/" + currentPage + "/" + pageSize)
          .then((res) => {
            console.log(res);
            this.tableDatas = res.data.data;
            this.getAllScoreCount();
          });
    },
    //获取记录条数
    getAllScoreCount() {
      axios
          .get("http://localhost:8085/admin/scoreSelectCount")
          .then((res) => {
            console.log(res);
            this.total = res.data.data;
          });
    },
    searchScore() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/admin/getScoreById",
            data :{
              scoreId:this.inputScoreById
            }
          }
      ).then(res => {
        if(res.data.code === 200){
          this.flag=1;
          this.tableDatas=res.data.data;
//this.showAllUserInfo(this.now,this.size);
        }
      })
    },
    searchScore1() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/admin/getScoreBySubId",
            data: {
              studentSubjectId:this.inputScoreBySubId
            }
          }
      ).then(res => {
        if(res.data.code === 200){
          this.flag=1;
          this.tableDatas=res.data.data;
//this.showAllUserInfo(this.now,this.size);
        }
      })
    },
    backToAllScore(){
      this.showAllUserInfo(this.now,this.size);
    },
    scoreInsert(){
      this.visible=true;
    },
    addScore() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/admin/addScore",
            data: this.addScoreForm
          }
      )
          .then(res => {
            if (res.data.code === 200) {
              // 添加完成
              this.showAllUserInfo(this.now,this.size)
              this.visible = false
              this.$message({message: "添加成绩成功！", type: "success"})
            } else {
              alert(res.data.message)
            }
          })
          .catch(error => {

          })
    },
    updateScore() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'post',
        url: "http://localhost:8085/admin/updateScore",
        data: this.editScoreForm,
      }).then(res => {
        if (res.data.code === 200) {
          // 添加完成
          this.showAllUserInfo(this.now,this.size)
          this.editVisible = false
          this.$message({message: "编辑成绩成功！", type: "success"})
        } else {
          alert(res.data.message)
        }
      }).catch(error => {
      })
    },
  },

  created() {//Component加载进来首先执行这个方法，比如这个vue中先执行showAllUserInfo方法查询所有数据
    this.showAllUserInfo();
    this.getAllScoreCount();
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 100%;
  width: 100%;

  .a {
    text-decoration: none !important;
    color: #303133 !important;
  }

  .links {
    text-decoration: none !important;
    color: #303133 !important;
  }
}

.el-container {
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  padding: 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

